{include file="common/doc"/}
<style>
    .layui-colla-title {
        background-color: #FFFFFF;
    }

    .laytable-cell-1-0-1 {
        text-align: center;
        height: auto;
        white-space: normal;
    }
    .laytable-cell-1-0-2 {
        text-align: center;
        height: auto;
        white-space: normal;
    }
    .lgp-upload{
        position:absolute; left: 30%;
        display: none;
    }
    .layui-upload-drag:hover .lgp-upload{
        display: block;
    }
</style>
<body>
<script type="text/html" id="op_table">

    <?php echo $operation['tool'] ?>
</script>
<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <table lay-filter="table_list" id="table_list"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <?php echo $operation['toolbar'] ?>
    </div>
</script>
<template id="form_container" style="display:none;">
    <form class="layui-form" id="form" lay-filter="form" style="padding-top:30px">
        <div class="layui-form-item">
            <label class="layui-form-label">视频分类</label>
            <div class="layui-input-inline">
                <input type="text" id="tree" lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频标题</label>
            <div class="layui-input-block">
                <input type="hidden" name="category_id"/>
                <input type="text" name="video_title" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面图片</label>
            <div class="layui-upload-drag "  style="width: 200px;height: 100px;"lgp-type="file_chooser" lgp-name="video_img">
                <div class="lgp-upload"> <i class="layui-icon"></i>
                    <p>打开文件管理</p></div>
                <div class="container"></div>
                <input type="hidden" name="video_img" value="">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频</label>
            <div class="layui-input-inline">
                <input type="text" name="video_path" required lay-verify="required" placeholder="视频链接"
                       autocomplete="off" class="layui-input">
            </div>
        </div><div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <input type="text" name="video_author" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简短描述</label>
            <div class="layui-input-block ">
                <textarea name="video_desc" class="layui-textarea" cols="50" rows="10"></textarea>
            </div>
        </div>
       <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>
</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'table', 'treeSelect', 'layedit', 'fileChooser'], function () {
        var $ = layui.$
            , form = layui.form
            , layedit = layui.layedit
            , fileChooser = layui.fileChooser
            , treeSelect = layui.treeSelect
            , table = layui.table;
        table.render({
            elem: '#table_list'
            , height: 'full'
            , skin: 'line'
            , toolbar: '#toolbar'
            , limit: 10
            , url: 'read' + location.search//数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'numbers', title: 'id'},
                {
                    field: 'video_img', align: 'center', title: '封面图', templet: function (d) {
                        return d.video_img ? `<img src="${d.video_img}" width="100" height="100">` : '<img src="/layuiadmin/image/404.jpg" width="100" height="100">';
                    }
                },

                {field: 'video_title', title: '视频标题', align: 'center'},

                {field: 'video_author', title: '视频作者', align: 'center'},
                {field: 'video_desc', title: '简短描述', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#op_table'},
            ]]
        });
        function open(data = {}) {
            function treeChooser(input, chooser_node = 0) {
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: '/admin/video_category/read?data_type=tree',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '占位符',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $("input[name=" + input + "]").val(d.current.id);
                    },
                    success: function (d) {
                        treeSelect.checkNode('tree', chooser_node);
                    }

                });
            }
            layer.open({
                type: 1,
                maxmin: true,
                title: '菜单编辑',
                area: ['800px', '500px'],
                content: $('#form_container').html(),
                success: function (lay, index) {
                    form.render();
                    fileChooser.render();
                    let url = 'add';
                    if (JSON.stringify(data) !== '{}') {
                        treeChooser('category_id', data['category_id']);
                        url = 'upd';
                        $('input[name="video_img"]').prev().html(`<img src="${data.video_img}">`);
                        $('input[name="video_path"]').prev().html(`<video  style="width: 100%; height: 100%" controls>
                                            <source src="${data.video_path}" type="video/mp4">
                                        </video>`);

                        form.val('form', data);
                    } else {
                        treeChooser('category_id');
                    }
                    form.render();
                    form.on('submit(form_submit)', function (ewa) {
                        Object.assign(data, ewa.field);
                        let status = request({'url': url, 'data': data});
                        if (status) {
                            layer.close(index);
                            table.reload('table_list');
                        }
                        return false;
                    });
                }
            })
        }
        table.on('tool(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('upd')) {
                open(obj.data);
            }
            if (event.includes('del')) {
                let status = request({'url': 'del', 'data': {'video_id': obj.data['video_id']}});
                if (status){
                    obj.del();
                }
            }
        });
        table.on('toolbar(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('add')) {
                open();
            }
        });

    });
</script>
</html>
